<script setup>
import Header from '@/components/detail_header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
import { ref } from 'vue'
const jsjgList = ref([
  {
    name: '基础设施层',
    content: '高性能计算集群、存储系统、网络设备等硬件基础设施',
  },
  {
    name: '资源管理层',
    content: 'Kubernetes、Slurm等资源调度和管理系统',
  },
  {
    name: '计算引擎层',
    content: 'Spark、Flink、TensorFlow等计算框架和引擎',
  },
  {
    name: '工具服务层',
    content: '开发工具、模型库、数据集等支持服务',
  },
  {
    name: '应用接口层',
    content: 'REST API、SDK、Web门户等应用接口',
  },
  {
    name: '行业应用层',
    content: '面向各行业的解决方案和应用案例',
  },
])
const hxzyList = ref([
  {
    name: '行业知识库',
    content: '涵盖科技、经济、产业等多个领域的专业文献、研究报告和技术标准',
  },
  {
    name: '专家资源库',
    content: '汇集各领域专家学者，提供咨询、评审和技术支持服务',
  },
  {
    name: '智能检索系统',
    content: '基于自然语言处理的智能搜索，精准匹配用户知识需求',
  },
  {
    name: '数据分析平台',
    content: '提供数据可视化、趋势分析和知识发现工具',
  }])
const platformList = ref([
  {
    name:'智算中心',
    content:'智算中心是创新服务平台的计算基础设施，提供强大的计算能力和算法支持。中心拥有超过10PFlops的计算能力，配备最新的GPU和TPU加速卡，支持大规模并行计算和深度学习训练任务。',
    img:'💻',
    featureArray:[
      {l:'高性能计算服务'},
      {l:'AI训练平台'},
      {l:'大数据分析'},
      {l:'安全计算环境'},
      {l:'边缘协同计算'},
    ],
  },
  {
    name:'知识中枢',
    content:'知识中枢是创新服务平台的知识基础设施，集成了行业知识库、专家资源库和智能问答系统。中枢汇聚了超过100万篇行业文献、50万项专利数据和5千位行业专家资源，通过人工智能技术实现知识的智能检索和关联分析。',
    img:'📚',
    featureArray:[
      {l:'行业知识库'},
      {l:'专家资源库'},
      {l:'智能检索系统'},
      {l:'知识图谱构建'},
      {l:'智能问答服务'},
    ],
  },
  {
    name:'模型中枢',
    content:'模型中枢是创新服务平台的AI模型资源库，集成了机器学习、深度学习和传统算法模型。中枢汇聚了超过1000个预训练模型，覆盖计算机视觉、自然语言处理、语音识别、推荐系统等多个领域，为企业和开发者提供模型开发、训练、部署和应用的全流程支持。',
    img:'🧠',
    featureArray:[
      {l:'模型仓库'},
      {l:'训练平台'},
      {l:'推理服务'},
      {l:'模型管理'},
      {l:'联邦学习'},
    ],
  },
  {
    name:'场景应用中心',
    content:'场景应用中心是创新服务平台的应用展示平台，聚焦各行业数字化转型需求，提供从技术到场景的完整解决方案。中心汇聚了来自智能制造、智慧城市、数字医疗、智慧农业等领域的200多个成功案例，通过展示优秀案例、提供解决方案咨询、组织场景对接活动等方式，帮助企业找到最适合的技术应用路径',
    img:'💻',
    featureArray:[
      {l:'场景展示'},
      {l:'需求对接'},
      {l:'方案验证'},
      {l:'技术咨询'},
      {l:'成果推广'},
    ],
  },
])
const caseList = ref([
  {
    name: 'AI辅助新药研发',
    content: '利用智算中心和模型中枢的计算能力和AI模型，为某制药企业提供分子动力学模拟和药物分子设计计算服务，将新药研发周期缩短40%。',
  },
  {
    name: '智能制造质量预测',
    content: '通过场景应用中心和模型中枢的服务，帮助制造企业建立产品质量预测模型，实现生产过程的实时监控和缺陷预警。',
  },
  {
    name: '金融风控模型训练',
    content: '为金融机构提供大规模风控模型训练服务，处理PB级交易数据，提升欺诈识别准确率。',
  }])
</script>

<template>
  <div class="details">
    <Header></Header>
    <Breadcrumb></Breadcrumb>
    <h1 class="page-title">赋能平台</h1>
    <p class="page-subtitle">创新服务平台构建四大核心赋能平台，为企业数字化转型提供全方位支持</p>
    <div class="intro-section">
      <div class="intro-content">
        <div class="intro-text">
          <h2>赋能平台概述</h2>
          <p>创新服务平台整合前沿技术和优质资源，构建了智算中心、知识中枢、模型中枢和场景应用中心四大赋能平台，形成完整的数字化转型服务体系。</p>
          <p>四大平台相互协同，覆盖从底层计算能力、知识资源、算法模型到应用场景的全链条服务，为企业提供一站式数字化转型解决方案。</p>
          <p>赋能平台已服务超过1000家企业，支持500多个数字化转型项目，成为区域创新发展的重要支撑。</p>
        </div>
        <img src="https://via.placeholder.com/500x300?text=赋能平台" alt="赋能平台" class="intro-image">
      </div>
    </div>
    <div class="platform-section">
      <h2 class="section-title">核心赋能平台</h2>
      <p>四大赋能平台各具特色，共同构成创新服务平台的核心竞争力</p>

      <div class="platform-grid">

        <div class="platform-card" v-for="(item, index) in platformList" :key="index">
          <div class="platform-header">
            <div class="platform-icon">{{item.img}}</div>
            <h3 class="platform-title">{{item.name}}</h3>
          </div>

          <div class="platform-content">
            <div class="platform-text">
              <p>{{item.content}}</p>
              <div class="platform-features">
                <h4>核心能力</h4>
                <ul class="feature-list" v-for="(iteml, index) in item.featureArray" :key="index+'l'">
                  <li>{{iteml.l}}</li>
                </ul>
              </div>
              <a href="javascript:;" class="platform-link">了解详情</a>
            </div>
            <img src="@/assets/img/static/nuandong_sj.png" alt="智算中心" class="platform-image">
          </div>
        </div>
      </div>
    </div>
    <div class="detail-section">
      <h2 class="section-title">平台详情</h2>

      <!-- 智算中心详情 -->
      <div class="detail-item">
        <h3>智算中心</h3>
        <div class="detail-content">
          <div class="detail-text">
            <p>
              智算中心采用分层架构设计，从基础设施到应用服务形成完整的计算服务体系。中心拥有200+计算节点，包含CPU、GPU和TPU多种架构，峰值计算能力达10PFlops。存储系统采用全闪存架构，总容量20PB，支持高并发IO访问。网络系统采用100Gbps高速互联，实现低延迟、高带宽的数据传输。
            </p>
            <p>智算中心已服务超过200家企业、50所高校和研究机构，累计完成计算任务超过10万项，有力支撑了区域科技创新和产业升级。</p>
          </div>
          <img src="https://via.placeholder.com/400x250?text=智算中心架构" alt="智算中心架构" class="detail-image">
        </div>

        <h4>技术架构</h4>
        <div class="feature-grid">
          <div class="feature-card" v-for="(item, index) in jsjgList" :key="index">
            <h4>{{item.name}}</h4>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>

      <!-- 知识中枢详情 -->
      <div class="detail-item">
        <h3>知识中枢</h3>
        <div class="detail-content">
          <div class="detail-text">
            <p>
              知识中枢采用多模态知识图谱技术，将结构化数据和非结构化文本深度融合，构建了覆盖多个领域的知识网络。中枢建设分为三个阶段：一期工程完成了基础平台搭建和核心知识库建设；二期工程实现了多模态知识融合和智能服务升级；三期工程将重点打造行业垂直知识库和专家协同网络。
            </p>
            <p>目前，知识中枢已整合了来自100多个数据源的知识资源，构建了20多个领域的知识图谱，服务用户超过10万人，日均知识检索量超过5万次。</p>
          </div>
          <img src="https://via.placeholder.com/400x250?text=知识中枢架构" alt="知识中枢架构" class="detail-image">
        </div>

        <h4>核心资源</h4>
        <div class="feature-grid">
          <div class="feature-card" v-for="(item, index) in hxzyList" :key="index">
            <h4>{{item.name}}</h4>
            <p>{{item.content}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="case-section">
      <h2 class="section-title">成功案例</h2>
      <p>赋能平台已成功支持多个行业的数字化转型项目</p>

      <div class="case-list">
        <div class="case-card" v-for="(item, index) in caseList" :key="index">
          <img src="@/assets/img/static/nuandong_sj.png" alt="医药研发" class="case-image">
          <div class="case-content">
            <h4>{{ item.name }}</h4>
            <p>{{item.content}}</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 赋能平台介绍 */
.intro-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.intro-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.intro-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.intro-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 平台展示区 */
.platform-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 平台卡片 */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.platform-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.platform-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.platform-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.platform-icon {
  font-size: 40px;
  color: #207cca;
  margin-right: 20px;
}

.platform-title {
  font-size: 22px;
  color: #1e5799;
}

.platform-content {
  display: flex;
}

.platform-text {
  flex: 1;
}

.platform-text p {
  color: #555;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.platform-features {
  margin-top: 20px;
}

.platform-features h4 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #1e5799;
}

.feature-list {
  list-style: none;
}

.feature-list li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

.feature-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #207cca;
}

.platform-image {
  width: 250px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.platform-link {
  display: inline-block;
  margin-top: 20px;
  background-color: #1e5799;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.platform-link:hover {
  background-color: #207cca;
}

/* 平台详情 */
.detail-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.detail-item {
  margin-bottom: 50px;
}

.detail-item h3 {
  font-size: 22px;
  margin-bottom: 20px;
  color: #1e5799;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-content {
  display: flex;
  margin-bottom: 30px;
}

.detail-text {
  flex: 1;
  font-size: 16px;
  color: #555;
  line-height: 1.8;
}

.detail-image {
  width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.feature-card {
  background-color: #f0f7ff;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #207cca;
}

.feature-card h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #1e5799;
}

.feature-card p {
  color: #666;
  font-size: 14px;
}

/* 案例展示 */
.case-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}
</style>